<!--
* @Author: zhangjing
* @Date: 2025-06-05 14:13:24
* @Description: 答题按钮=>
-->
<template>
	<div>
		<div class="stubox">
			<template v-if="currentKey && currentKey != 'all'">
				<component
					:is="filterMainComponent(currentKey)"
					:ref="'component' + currentKey"
					:studentList="studentList"
					:machineData="machineData"
					:formData="formData"
					@reback="reback"
				></component>
			</template>
		</div>
		<div class="flex btnbox">
			<div v-if="currentKey && currentKey != 'all'" class="btn" @click="send()">
				<img src="/home/btn.png" alt="" />
				<span>确定</span>
			</div>
			<template v-else>
				<div class="btn" @click="answer('all')">
					<img src="/home/btn.png" alt="" />
					<span>全答</span>
				</div>
				<div class="btn" @click="showMore = !showMore">
					<img src="/home/btn.png" alt="" />
					<span>...</span>
				</div>
				<div class="btngroup" v-if="showMore">
					<div class="btn" @click="answer('team')">
						<img src="/home/btn.png" alt="" />
						<span>分组答</span>
					</div>
					<div class="btn" @click="answer('quickanswer')">
						<img src="/home/btn.png" alt="" />
						<span>抢答</span>
					</div>
					<div class="btn" @click="answer('drawstraws')">
						<img src="/home/btn.png" alt="" />
						<span>抽答</span>
					</div>
					<div class="btn" @click="answer('selectStu')">
						<img src="/home/btn.png" alt="" />
						<span>选答</span>
					</div>
				</div>
			</template>
		</div>
	</div>
</template>

<script>
import { mainMoudelComponent } from '../components/index.js';
import { mapState } from 'vuex';
export default {
	data() {
		return {
			showMore: false,
			currentKey: '',
			selectStuList: [],
			sendTime: 0, //点击确定后多久发题
		};
	},
	props: {
		//接收器信息
		machineData: {
			type: Object,
			default: () => {},
		}, //上课数据
		formData: {
			type: Object,
			default: () => {},
		},
	},
	components: {
		...mainMoudelComponent,
	},
	computed: {
		...mapState({
			studentList: (state) => state.websockStore.studentList,
		}),
	},
	methods: {
		answer(type) {
			this.$emit('changeType', type);
			this.showMore = false;
			this.currentKey = type;
			this.sendTime = 0;
			switch (type) {
				case 'all': {
					this.send();
					break;
				}
				case 'drawstraws': {
					this.$nextTick(() => {
						this.$refs.componentdrawstraws.startDrawstraws();
					});
					break;
				}
				case 'quickanswer': {
					this.$nextTick(() => {
						this.$refs.componentquickanswer.startQuickanswer();
						this.$emit('startQuickanswer');
					});
					break;
				}
				case 'selectStu': {
					this.$nextTick(() => {
						// this.$refs.componentselectStu.startQuickanswer();
						// this.$emit('startQuickanswer');
					});
					break;
				}
			}
		},
		send() {
			switch (this.currentKey) {
				case 'all': {
					this.selectStuList = this.studentList.map((item) => item.studId);
					break;
				}
				case 'drawstraws': {
					//还没有结束
					if (this.$refs.componentdrawstraws.isStart) {
						this.sendTime = 1000;
						this.$refs.componentdrawstraws.stopDrawstraws();
					}
					this.selectStuList = this.$refs.componentdrawstraws.selectIds;
					break;
				}
				case 'selectStu': {
					this.selectStuList = this.$refs.componentselectStu.getStuList();
					console.log('this.selectStuList', this.selectStuList);
					break;
				}
				case 'team': {
					this.selectStuList = this.$refs.componentteam.getStuList();
					console.log('this.selectStuList', this.selectStuList);
					break;
				}
			}
			if (this.selectStuList.length > 0) {
				setTimeout(() => {
					this.$emit('startAnswer', this.selectStuList, this.currentKey);
				}, this.sendTime);
			} else {
				this.$message.error('没有选择答题的学生');
			}
		},
		//渲染模块组件
		filterMainComponent(id) {
			/**
			 * 极少概率出现没有id的情况，当没有时，判断权限有无即兴问题，无则走quiz组件（随堂检测和课后作业均用的quiz组件）
			 */
			id = id || 'startAnswer';
			for (var key in mainMoudelComponent) {
				if (id == key) {
					return mainMoudelComponent[key];
				}
			}
		},
		reback() {
			this.currentKey = '';
		},
	},
};
</script>

<style scoped lang="less">
.stubox {
	position: absolute;
	bottom: 70px;
	left: 50%;
	transform: translateX(-50%);
}
.btnbox {
	position: relative;
	.btngroup {
		position: absolute;
		right: 0;
		bottom: 65px;
		.btn {
			position: relative;
			top: 6px;
		}
	}
}
.btn {
	position: relative;
	height: 60px;
	width: 60px;
	cursor: pointer;
	span {
		position: absolute;
		color: #fff;
		font-size: 12px;
		top: 50%;
		left: 50%;
		transform: translate(-35%, -50%);
		white-space: nowrap;
	}
}
</style>
